<template>
	<div class="sidebar">
		<div class="logo"></div>
		<ul class="list" >
			<li v-for='(item,index) of nav'>
				<a href="javascript:;"
				 @click='handleClickNav(index,item.id)'
				 :class="{'active':index==checkindex}"
				 >{{item.nav}}</a>
			</li>
		</ul>		
		<div class="bottom-img">
			
		</div>
	</div>
</template>
<script>
	export default {
		props:{
			nav:{
				type:Array
			}
		},
		data(){
			return {
				checkindex:0
			}
		},
		watch:{
			nav(curr,old){
				if(old.length==0){
					return
				}else{
					if(curr[0].id!=old[0].id){
						this.checkindex = 0
					}
				}
			}
		},
		created(){
		},
		methods:{
			handleClickNav(index,id){
				this.checkindex = index
				switch (id) {
					case 'home' :
					this.$router.push({
						path:'/index',
					})
					break 
					case 'add' :
					this.$router.push({
						path:'/add'
					})
					break
					case 'out' :
					sessionStorage.removeItem('token')
					this.$router.push({
						path:'/'
					})
					break
					case 'about' :
					this.$router.push({
						path:'/about'
					}) 
					break
					case 'login' :
					this.$router.push({
						path:"/login"
					})
					break
					case 'register':
					this.$router.push({
						path:'/register'
					})
					break
					default :
					this.$router.push({
						path:'/login'
					})
				}
			}
		}
	}
</script>
<style>
	.sidebar{
		position: fixed;
		width: 20%;
		height: 100%;
		background-color: #002E3B;
	}
	.logo{
		width: 100%;
		height: 100px;
		background: url(../assets/logo2.png) no-repeat left;
		background-size: 100%;
	}
	.list li{
		height: 50px;
		padding-right: 3px;
		line-height: 50px;
		border-bottom: 1px solid #999;
	}
	.list li a {
		display: block;
		width: 100%;
		text-decoration: none;
		text-align: center;
		color: rgba(255,255,255,.7);
		/*transition: .3s ease all*/
	}
	.list li a:hover{
		color: #fff;
	}
	.list li a.active{
		border-right: 3px solid red;
		background: #363e4f;
	}
	.bottom-img{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 200px;
		background: url('../assets/b1.png') no-repeat center;
		background-size: contain;
	}
</style>